<template>
  <div class="chartBox">
    <div class="biaoti">
      <img src="../../assets/UI/biaoleft.png" />近14天确诊人员增长趋势情况
    </div>
    <div id="chart8">
      <Row style="margin-top: 10px" :gutter="24">
        <Col :span="24">
          <div class="right-one" ref="rightone"></div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  name: "chart",
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.loadJson();
  },
  watch: {},
  methods: {
    loadJson() {
      this.initChart();
    },
    initChart() {
      const data = [
        ["12-08", 0],
        ["12-09", 0],
        ["12-10", 0],
        ["12-11", 0],
        ["12-12", 1],
        ["12-13", 1],
        ["12-14", 0],
        ["12-15", 4],
        ["12-16", 4],
        ["12-17", 7],
        ["12-18", 10],
        ["12-19", 21],
        ["12-20", 42],
        ["12-21", 52],
      ];
      const dateList = data.map(function (item) {
        return item[0];
      });
      const valueList = data.map(function (item) {
        return item[1];
      });
      let myChart = this.$echarts.init(this.$refs.rightone);

      let option = {
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: -20,
            max: 60,
          },
        ],
        // title: [
        //   {
        //     left: "center",
        //     text: "Gradient along the y axis",
        //   }
        // ],
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            name: '日期',
            nameTextStyle: {
                padding: -10
            },
            data: dateList,
          },
        ],
        yAxis: [{
          name: '数量（人）',
        }],
        grid: [
          {
            bottom: "15%",
            top: "10%",
          },
        ],
        series: [
          {
            type: "line",
            showSymbol: true,
            data: valueList,
            smooth: true,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.chartBox {
  width: 540px;
  height: 320px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: rgba(253, 253, 253, 0.8);
  box-shadow: 0px 1px 6px 0px rgba(65, 65, 65, 0.34);
  border-radius: 8px;
  /* cursor: pointer; */
}
.biaoti {
  height: 35px;
  line-height: 35px;
  font-size: 20px;
  font-weight: bolder;
  color: #024055;
  padding-left: 15px;
  padding-top: 4px;
}

.biaoti img {
  vertical-align: inherit;
  border-style: none;
  height: 70%;
  margin-right: 10px;
}

#chart8 {
  width: 100%;
  height: 500px;
}
.right-one {
  background: rgba(253, 253, 253, 0.8);
  border-radius: 4px;
  height: 280px;
  width: 100%;
  overflow: hidden;
}
</style>
